<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>小狗跑</title>
</head>
    <style type="text/css">
        #left{
        	position: relative;left:0;
        }


    </style>
    <script type="text/javascript">
        //左->右
        window.onload = function(){
        	var oDiv = document.getElementById('left');
        	var img = document.getElementById('img');
            //获取图片的宽高
            var width=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;			

			var height=window.innerHeight  || document.documentElement.clientHeight || document.body.clientHeight;
			
			//转整数
			width = parseInt(width);    //1356px
            height = parseInt(height);  //308px
            // console.log(height);

            direction = 0;
            left=0;
            function run(){
            	//以0作为判断方向的基准
                
            	if(direction==0){
                    left += 50;
            	}else{
            		left -= 50;
            	}

            	if(left>1356){
            		//加载图片
            		img.src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4220103486,324828144&fm=23&gp=0.jpg";
            		direction = 1;
            	}else if(left==0){
            		direction = 0;
            	}
            	oDiv.style.left = left + 'px';
            }


        	//按钮功能
            var oBtn = document.getElementById('btn');
            oBtn.onclick = function(){
            	if(oBtn.getAttribute('value')=='开始'){
                    oBtn.setAttribute('value','暂停');
                    time = setInterval(run,500);
                }else{
                	oBtn.setAttribute('value','开始');
                	clearInterval(time);
                }
            }
        }


    </script>
   
<body>

   <input id="btn" type="button" value="开始">
   <div id="left"><img id="img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488192421614&di=947866d86cab6688b38efd5240af95c5&imgtype=0&src=http%3A%2F%2Fwww.goumin.com%2Fattachments%2Fphoto%2F0%2F0%2F91%2F23483%2F6011741.gif" alt=""></div>

    
	
</body>
</html>